<template>
	<view class="header fixed" :style="header_style">
		<view class="header_box" :style="box_style">
			<view class="name" :style="name_style" @click="change('name')">首页</view>
			<view class="search" :style="search_style" @click="change('search')">
				<rui-icon icon="search" color="#999"></rui-icon> 搜索线路、景点
			</view>
		</view>
	</view>
	<view :style="header_style"></view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const emits = defineEmits(['change'])

	const change = (e) => {
		emits('change', e)
	}
	
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	
	
	let header_style = ref({
		height: (menuButtonInfo.bottom * 2) + 'rpx'
	})

	let box_style = ref({
		paddingTop: (menuButtonInfo.top * 2 - 6) + 'rpx'
	})

	let search_width = menuButtonInfo.width + 280;
	let search_height = (menuButtonInfo.height * 2 - 4) + 'rpx';
	let search_style = ref({
		height: search_height,
		width: `calc(100% - ${search_width}rpx)`,
		lineHeight: search_height
	})

	let name_height = (menuButtonInfo.height * 2 - 4) + 'rpx';
	let name_style = ref({
		height: name_height,
		lineHeight: name_height
	})
	// console.log(menuButtonInfo)
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed !important;
		width: 100%;
		inset: 0;
		z-index: 9999;
	}

	.header {
		background: #fff;
		position: relative;
		box-shadow: 0 0 15rpx rgba(0, 0, 0, .1);

		&_box {
			display: flex;

			.name {
				width: 150rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.search {
				background: #eee;
				border-radius: 50rpx;
				padding-left: 20rpx;
				color: #999;
				display: flex;
			}

		}
	}
</style>